<!-- 抗菌药总数/排名 -->
<template>
    <div id="antibacterial"></div>
</template>
<script>
import * as echarts from "echarts";
import { getAntibacterialData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
        };
    },
    mounted() {
        // getAntibacterialData(this.setEcharts);
        this.setEcharts()
    },
    methods: {

        //设置echarts
        setEcharts() {
            // let data1 = [];
            // let data2 = [];
            // for (let i = 0; i <= 4; i++) {
            //     data1.push(data[i].HOS_NAME);
            //     data2.push(parseInt(data[i].VALUE1));
            // }
            const arr = new Array(5).fill(0).map(() => Mock.Random.natural(1000, 10000));

            let antibacterial = echarts.init(
                document.getElementById("antibacterial")
            );
            var myColor = [
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#395CFE" },
                    { offset: 1, color: "#2EC7CF" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#395CFE" },
                    { offset: 1, color: "#2EC7CF" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#F7B731" },
                    { offset: 1, color: "#FFEE96" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#FA8231" },
                    { offset: 1, color: "#FFD14C" },
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#EB3B5A" },
                    { offset: 1, color: "#FE9C5A" },
                ]),
            ];
            let option = {
                grid: {
                    left: "5%",
                    top: "1%",
                    right: "5%",
                    bottom: "0%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        show: false,
                    },
                ],
                yAxis: [
                    {
                        axisTick: "none",
                        axisLine: "none",
                        offset: "27",
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: "16",
                            },
                        },
                        data: [
                            "林可霉素",
                            "克林霉素",
                            "亚胺培南",
                            "头孢噻肟",
                            "哌拉西林",
                        ],
                    },
                    {
                        axisTick: "none",
                        axisLine: "none",
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: "0",
                            },
                        },
                        data: [5, 4, 3, 2, 1],
                    },
                    {
                        nameGap: "50",
                        nameTextStyle: {
                            color: "#ffffff",
                            fontSize: "30",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(0,0,0,0)",
                            },
                        },
                        data: [],
                    },
                ],
                series: [
                    {
                        name: "条",
                        type: "bar",
                        yAxisIndex: 0,
                        barGap: 0.5, //柱间距离
                        data: arr,
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                textStyle: {
                                    color: "#ffffff",
                                    fontSize: "16",
                                },
                            },
                        },
                        barWidth: 12,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num];
                                },
                            },
                        },
                        z: 2,
                    },
                    {
                        name: "外圆",
                        type: "scatter",
                        hoverAnimation: false,
                        data: [0, 0, 0, 0, 0],
                        yAxisIndex: 2,
                        symbolSize: 25,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num];
                                },
                                opacity: 1,
                            },
                        },
                        z: 2,
                    },
                ],
            };
            antibacterial.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#antibacterial {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>